<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head th:replace="fragments :: head(~{::title})">
        <Title>博客首页</Title>
    </head>
    <body>
        <!-- 导航 -->
        <nav th:replace="fragments::menu(1)"></nav>

        <!-- 中间内容 -->
        <div id="waypoint" class="me-padded-tb-large">
            <!-- container可以自动响应布局 -->
            <div class="ui container">
                    <div class="ui middle aligned stackable grid">
                        <!-- 博客列表 -->
                        <div id="table-container" th:fragment="blogList" class="eleven wide column">
                            <input type="hidden" name="page">
                                <!-- header -->
                                <div class="ui top attached segment">

                                    <div class="ui two column grid middle aligned">
                                        <div class="column">
                                            <h3 class="ui header teal">博客</h3>
                                        </div>
                                        <div class="right aligned column">
                                            共 <h3 class="ui header orange
                                           me-inline-block" th:text="${counts}">14</h3> 篇
                                        </div>
                                    </div>
                                </div>
                                <!-- content 每篇博客内容 -->
                                <div class="ui attached   segment me-text ">
                                    <div class="ui padded   segment me-padded-tb-big"  th:each="blog,iterStat : ${page.getRecords()}     " >
                                        <div class="ui mobile reversed  stackable grid">
                                            <div class="eleven wide column" >
                                                <!-- 博客标题 -->
                                                <h3 class="ui header" >
                                                    <a  href="#" th:href="@{/blog/{id}(id=${blog.id})}"    th:text="${blog.title} " STYLE="color: black" >
                                                        博客标题
                                                    </a>
                                                </h3>
                                                <!-- 博客内容 -->
                                                <p  th:text="|${blog.description}......|">诗延绵千年而不绝，歌咏千年而不息，就是因为诗歌自身</p>
                                                <div class="ui grid">
                                                    <!-- 用户基本信息 -->
                                                    <div class="eleven wide column">
                                                        <div class="ui mini horizontal link list">
                                                            <div class="item">
                                                                <img src="../static/image/1.png" th:src="${blog.user.avatar}" alt="" class="ui avatar image">
                                                                <div class="content">
                                                                    <a href="#"><div class="header" th:text="${blog.user.nickname}">杨瑞卿</div></a>
<!--                                                                    <a href="#"><div class="header" >杨瑞卿</div></a>-->
                                                                </div>
                                                            </div>
                                                            <div class="item" >
                                                                <i class="calendar icon"></i> <span th:text="${#dates.format(blog.updateTime, 'yyyy-MM-dd HH:mm:ss')}">2020-3-26</span>
                                                            </div>
                                                            <div class="item" >
                                                                <i class="eye icon"></i> <span th:text="${blog.views}">9999</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- 标签label -->
                                                    <div class="right aligned five wide column" >
                                                        <a href="#" class="ui basic teal label me-padded-mini" th:each=" tag:${blog.tags}">
                                                            <span th:text="${tag.name}">方法论</span>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 文章图片 最好是800width 400height -->
                                            <div class="five wide column">
                                                <a href="" th:href="@{/blog/{id}(id=${blog.id})}" >
                                                    <img width="200" height="100" src="https://i.picsum.photos/id/961/300/200.jpg" alt="" class="ui rounded bordered fluid"
                                                         th:src="@{${blog.firstPicture}}" style="max-width: 100%; height: auto">
                                                </a>
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <!-- footer -->
                                <div class="ui bottom attached segment" th:if="${page.pages>1}">
                                    <div class="ui two column grid middle aligned"  >
                                        <div class="column">
                                            <a onclick="page(this)" th:attr="data-page=${page.getCurrent()}-1" class="ui teal button" th:if="${page.hasPrevious()}">上一页</a>
                                        </div>
                                        <div class="right aligned column ">
                                            <a onclick="page(this)" th:attr="data-page=${page.getCurrent()}+1" class="ui teal button" th:if="${page.hasNext()}">下一页</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <!-- 右边的top 榜单 -->
                        <div class="five wide column">
                            <!-- 分类 -->
                            <div class="ui segments">
                                <div class="ui secondary segment">
                                        <div class="ui two column grid">
                                                <div class="column">
                                                    <i class="idea icon"></i> 分类
                                                </div>
                                                <div class="right aligned column">
                                                    <!-- target属性表示再打开一个网页 -->
                                                    <a href="#"  th:href="@{/types/-1}">more <i class="angle double right icon"></i></a>
                                                </div>
                                            </div>
                                </div>
                                <div class="ui segment" >
                                    <div class="ui fluid vertical menu">
                                        <a href="#"  th:href="@{/types/{id}(id=${type.id})}" class="item" th:each="type : ${types}" >
                                            <span th:text="${type.name}">方法论</span>
                                            <div class="ui teal basic left pointing label" th:text="${type.blogSize}">13</div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- 标签 -->
                            <div class="ui segments me-marrgin-top-large">
                                    <div class="ui secondary segment">
                                            <div class="ui two column grid ">
                                                    <div class="column">
                                                        <i class="tags icon"></i> 标签
                                                    </div>
                                                    <div class="right aligned column">
                                                        <!-- target属性表示再打开一个网页 -->
                                                        <a href="#" th:href="@{/tags/-1}" >more <i class="angle double right icon"></i></a>
                                                    </div>
                                                </div>
                                    </div>
                                    <div class="ui segment" >
                                        <a href="#"   th:href="@{/tags/{id}(id=${tag.id})}"  th:each="tag : ${tags}"  class="ui teal basic left pointing label me-marrgin-tb-tiny">
                                            <span th:text="${tag.name}">方法论</span>
                                            <div class="detail" th:text="${tag.blogSize}">23</div>
                                        </a>
                                    </div>
                                </div>
                            <!-- 最新推荐 -->
                            <div class="ui segments me-marrgin-top-large">
                                    <div class="ui secondary segment">
                                        <i class="bookmark icon"></i> 最新推荐
                                    </div>
                                    <div class="ui segment" th:each="blog : ${blogs}">
                                        <a href="" th:href="@{/blog/{id}(id=${blog.id})}" class="" th:text="${blog.title}"> 搭建Springboot博客</a>
                                    </div>
                                  
                                </div>
                            <!-- 联系我 -->
                            <h4 class="ui horizontal divider header me-marrgin-top-large">扫码联系我</h4>
                            <div class="ui centered card" style="width: 11em;">
                                <img src="../static/image/wechat.png" alt="" class="ui rounded image">
                            </div>
                        </div>
                    </div>
            </div>
          
        </div>

        <!--    工具条 -->
        <div id="toolbar" class="me-fixed me-right-buttom me-padded-mini" style="display: none !important; ">
            <div class="ui vertical buttons">
                <button class="ui wechat icon button"><i class="weixin icon"></i></button>
                <button class="ui qq icon button"><i class="qq icon"></i></button>
                <button class="ui icon button"><i class="weibo icon"></i></button>
                <button onclick="location.href='https://github.com/1193700079/blog_yrq'" class="ui icon button"><i class="github icon"></i></button>
                <div  id="toTop-button" class="ui  icon button">
                    <i class="chevron up icon"></i>
                </div>
            </div>
        </div>

        <div id="qrcode_wechat"  class="ui wechat_qr popup flowing transition hidden" style="width: 130px;">
        </div>

        <div class="ui qq_qr popup flowing transition hidden" style="width: 130px;">
            <img src="../static/image/qq.jpg" alt="" class="ui rounded image" style="width: 100px;">
        </div>

        <!-- 底部栏 -->
        <footer th:replace="fragments::footer"></footer>

        <!-- 引入js脚本 -->
        <!--/*/<th:block th:replace="fragments :: script">/*/-->
        <!--/*/</th:block>/*/-->

<!--          自动生成二维码插件-->
        <script th:src="@{/plugin/qrcode.js}"></script>
<!--        滚动监测-->
        <script th:src="@{/plugin/waypoints/jquery.waypoints.js}"></script>
        <!--平滑滚动 -->
        <script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>


        <script>
            function page(obj) {
                $("[name='page']").val($(obj).data("page"));
                loaddata();
            }

            function loaddata() {
                $("#table-container").load("/",{
                    title : $("[name='title']").val(),
                    page : $("[name='page']").val()
                });
            };

            var waypoint = new Waypoint({
                element: document.getElementById('waypoint'),
                handler: function(direction) {
                    if(direction=="down"){
                        $("#toolbar").show(500);
                    }else{
                        $("#toolbar").hide(500);
                    }
                    console.log('Scrolled to waypoint!' + direction)
                }
            });

            //平滑滚动
            $("#toTop-button").click(function(){
                $(window).scrollTo(0,500);
            });

            // 自动生成二维码
            var qrcode = new QRCode("qrcode_wechat", {
                text: "http://jindo.dev.naver.com/collie",
                width: 128,
                height: 128,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.H
            });

            $(".qq").popup({
                popup: $(".qq_qr"),
                position: "left center"
            });
            $(".wechat").popup({
                popup: $(".wechat_qr"),
                position: "left center"
            });

            // 手机端点击显示导航栏
            // $('.menu.toggle').on('click',function(){
            //     $(".me-item").toggleClass("me-mobile-hide");
            // });
            // 手机端点击显示导航栏

            $(".menu.toggle").click(function () {
                $(".me-item").toggleClass("me-mobile-hide");
            });
            // 目录按钮
            $("#catalogue").popup({
                popup: $(".catalogue-container"),
                on: 'click',
                position: "left center"
            });
        </script>


    </body>
</html>